import React, { Component } from 'react';

import {Toast,NavBar,Collapse} from 'antd-mobile'

import {shopcart_add,shopcart_sub,shopcart_list,shopcart_clear} from "../../api/index"
import "../../styles/shopcart.scss"
class ShopCart extends Component {
    constructor(props){
        super(props);
        this.state={
            carlist:[],
            userid:localStorage.getItem("userid")
        }

    }
    // 条详情页
    goDetail(goodid){
        this.props.history.push("/goodsdetail/"+goodid)
    }
    async componentDidMount(){
        var res=await shopcart_list({userid:this.state.userid})
        console.log(res);
        this.setState({
            carlist:res.data.list
        })
    }
    async clearnull(){
        // Modal.alert({
        //     content: "是否清空购物车",
        //     confirmText: "确定",
        //     showCloseButton: true,
        //     onConfirm() {
        //         shopcar_clear({userid:localStorage.getItem("userid")}).then((ok) => {
        //         // 当请求发送成功时 强制刷新
        //         if (ok.data.code === 200) {
        //         //   window.location.reload();
        //             this.setState({
        //                 carlist:[]
        //             })
        //           Toast.show('购物车已清空！')

        //         }
        //       });
        //     },
        //   });
       var res=await  shopcart_clear({userid:this.state.userid})
       console.log(res);
       this.setState({
            carlist:[]
        })
       if (this.state.carlist) {
        Toast.show('购物车已清空！')
       }
    }
    // 加购物车
    async add(goodid){
        var res=await shopcart_add({userid:this.state.userid,goodid:goodid})
        console.log("加",res);
        this.list();
    }
    // 减
    async sub(goodid){
        var res=await shopcart_sub({userid:this.state.userid,goodid:goodid})
        console.log("减",res);
        this.list();
    }
    // 封装成一个函数，请求数据
    list(){
        shopcart_list({userid:this.state.userid}).then((res)=>{
            this.setState({
                carlist:res.data.list
            })
        })

    }
    render() {
        return (
            <div className='shopcar-box'>
                <div className='shopcar-top'>
                    <NavBar backArrow={false}
                            >
                            购物车({this.state.carlist.length})
                            <Collapse>
                                <Collapse.Panel key="1" title="清空" onClick={() => {this.clearnull();}}></Collapse.Panel>
                            </Collapse>
                    </NavBar>
                    
                </div>
                <div className="shopcar-main">
                {
                    this.state.carlist &&
                    this.state.carlist.map((item, index) => {
                    return (
                        <div
                        key={index}
                        className="shopcar-all"
                        >
                            <img src={item.pic} alt="" onClick={() => {this.goDetail(item.id)}}/>
                            <div className='shopcar-reduce'>
                                <p>{item.name}</p>
                                <div className='price'>
                                    <h4>
                                        活动价￥<span>{item.salesPrice.value}</span>
                                    </h4>
                                    <div className='kongzhi'>
                                        
                                        
                                        <button onClick={()=>{this.sub(item.id)}}>-</button>
                                        <div>{item.count}</div>
                                        <button onClick={()=>{this.add(item.id)}}>+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                    })}
                </div>
            </div>
        );
    }
}

export default ShopCart;
